<template>
        <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
                <a-form>
                        <a-form-item
                                :label="$t('title')"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 10}"
                        >
                                <a-input :placeholder="$t('titleInput')"/>
                        </a-form-item>
                        <a-form-item
                                :label="$t('date')"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 10}"
                        >
                                <a-range-picker style="width: 100%"/>
                        </a-form-item>
                        <a-form-item
                                :label="$t('describe')"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 10}"
                        >
                                <a-textarea rows="4" :placeholder="$t('describeInput')"/>
                        </a-form-item>
                        <a-form-item
                                :label="$t('metrics')"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 10}"
                        >
                                <a-textarea rows="4" :placeholder="$t('metricsInput')"/>
                        </a-form-item>
                        <a-form-item
                                :label="$t('customer')"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 10}"
                                :required="false"
                        >
                                <a-input :placeholder="$t('customerInput')"/>
                        </a-form-item>
                        <a-form-item
                                :label="$t('critics')"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 10}"
                                :required="false"
                        >
                                <a-input :placeholder="$t('criticsInput')"/>
                        </a-form-item>
                        <a-form-item
                                :label="$t('weight')"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 10}"
                                :required="false"
                        >
                                <a-input-number :min="0" :max="100"/>
                                <span>%</span>
                        </a-form-item>
                        <a-form-item
                                :label="$t('disclosure')"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 10}"
                                :required="false"
                                :help="$t('disclosureDesc')"
                        >
                                <a-radio-group v-model="value">
                                        <a-radio :value="1">{{$t('public')}}</a-radio>
                                        <a-radio :value="2">{{$t('partially')}}</a-radio>
                                        <a-radio :value="3">{{$t('private')}}</a-radio>
                                </a-radio-group>
                                <a-select mode="multiple" v-if="value === 2">
                                        <a-select-option value="4">{{$t('colleague1')}}</a-select-option>
                                        <a-select-option value="5">{{$t('colleague2')}}</a-select-option>
                                        <a-select-option value="6">{{$t('colleague3')}}</a-select-option>
                                </a-select>
                        </a-form-item>
                        <a-form-item style="margin-top: 24px" :wrapperCol="{span: 10, offset: 7}">
                                <a-button type="primary">{{$t('submit')}}</a-button>
                                <a-button style="margin-left: 8px">{{$t('save')}}</a-button>
                        </a-form-item>
                </a-form>
        </a-card>
</template>

<script>
        export default {
                name: 'BasicForm',
                i18n: require('./i18n'),
                data() {
                        return {
                                value: 1
                        }
                },
                computed: {
                        desc() {
                                return this.$t('pageDesc')
                        }
                }
        }
</script>

<style scoped>

</style>
